<template>
    <div>
        <p>inital message:{{ message }}</p>
        <p>reversed message:{{ reversedMessage }}</p>
        <button @click="updateMessage">Update</button>
    </div>
</template>


<script setup>
import {ref, computed} from 'vue'
const message=ref('Hello World')
const reversedMessage =computed(()=>{
    message.value.split('').reverse().join('')
})
const updateMessage=() =>{
    message.value='Hello Vue'
}
</script>